{% extends "user/common.html" %}

{% block title %}用户主页{% endblock %}

{% block head %}
    <link rel="stylesheet" type="text/css" href="{{ url_for("static", filename="css/user/index.css") }}">
    <script src="{{ url_for("static", filename="js/user/index.js") }}"></script>
{% endblock %}

{% block body %}
    <div style="padding-bottom: 100px">
        <div class="column">
            <h2>推荐阅读</h2>
            <div class="slider">
                <img src="https://tse3-mm.cn.bing.net/th/id/OIP-C.EzGki5RWtqAJluwEYC-QawHaFj?w=259&h=195&c=7&r=0&o=5&dpr=1.5&pid=1.7"
                     alt="">
                <img src="https://img.zcool.cn/community/01465c5cccfe2fa801208f8b706f18.jpg@1280w_1l_2o_100sh.jpg"
                     alt="">
                <img src="https://static.pptstore.net/picture/57/72/dd628ee241649938de93_s.jpg" alt="">
            </div>
        </div>

        {% for key, value in data.book_list.items() %}


            <div class="column">
                <div class="line">
                    <h2>{{ data.categories[key-1].category_name }}</h2>
                    <button class="but">···</button>
                </div>
                <div class="booook">

                    {% for item in value %}
                        <div class="book">
                            <img src={{ item.image_url }} alt="img">
                            <div class="info">
                                <div class="book_name">
                                    {{ item.book_name }}
                                </div>
                                <div class="line">
                                    <div class="writer">
                                        {{ item.author }}
                                    </div>
                                    <div class="borrow">借阅
                                        <text style="color: red">{{ item.borrow_count }}</text>
                                        次
                                    </div>
                                </div>
                                <div class="line">
                                    <p>{{ item.text }}</p>

                                </div>
                                <div class="inventory">
                                    {{ item.current_number }}/{{ item.number }}
                                </div>
                                <button class="button"
                                        onclick="window.location.href='{{ url_for('blueprint.user_book', id=item.book_id) }}'">
                                    详情
                                </button>
                                <button onclick="window.location.href='{{ url_for('blueprint.collect', id=item.book_id) }}'" class="button">收藏♥</button>
                                <button onclick="window.location.href='{{ url_for('blueprint.borrow', id=item.book_id) }}'" class="button" >借阅</button>
                            </div>
                        </div>
                    {% endfor %}
                </div>
            </div>
        {% endfor %}
    </div>

{% endblock %}